<template>
	<div>
		<component :is="type && list[type].com" :data="props.data" @submit="submit" @openSort="openSort"></component>
	</div>
</template>

<script setup lang="ts" name="EditForm">
import { ref, watch } from 'vue';
import Product from '/@/components/buildPage/Edit/Product.vue';
import QuickLinkEdit from '/@/components/buildPage/Edit/quickLinkEdit.vue';
import FocusEdit from '/@/components/buildPage/Edit/focusEdit.vue';
import Banner from '/@/components/buildPage/Edit/Banner.vue';
import Info from '/@/components/buildPage/Edit/Info.vue';
import Images from '/@/components/buildPage/Edit/Images.vue';
import TabbarEdit from '/@/components/buildPage/Edit/TabbarEdit.vue';
import TextEdit from '/@/components/buildPage/Edit/TextEdit.vue';

const props = defineProps({
	// 列表内容
	data: {
		type: Object,
		default: () => {},
	},
	isRight: {
		type: Boolean,
		default: () => false,
	},
});

watch(
	() => props.isRight,
	(val) => {
		if (val) {
			type.value = props.data.type;
		}
	}
);

const list = ref({
	info: {
		tit: '页面信息',
		com: Info,
	},
	product: {
		tit: '商品',
		com: Product,
	},
	quickLink: {
		tit: '金刚区',
		com: QuickLinkEdit,
	},
	banner: {
		tit: 'banner',
		com: Banner,
	},
	focusAdvertising: {
		tit: 'focusAdvertising',
		com: FocusEdit,
	},
	images: {
		tit: 'images',
		com: Images,
	},
	tabbarCom: {
		tit: 'images',
		com: TabbarEdit,
	},
	text: {
		tit: 'text',
		com: TextEdit
	}
});
const type = ref('');

const emit = defineEmits(['submit']);

function submit(data) {
	emit('submit', data);
}

function openSort(sortArr) {
	emit('openSort', sortArr);
}
</script>

<style scoped lang="scss">
section {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
}
.tab-content {
	padding: 0 15px;
	h2 {
		font-size: 16px;
		color: #333;
	}
	.tab {
		display: flex;
		justify-content: space-around;
		border: 1px solid #ddd;
		border-radius: 6px;
		span {
			width: 33.33%;
			text-align: center;
			font-size: 14px;
			color: #666;
			display: block;
			height: 36px;
			line-height: 36px;
			cursor: pointer;
			&.active {
				color: #fff;
				background: #409eff;
				border-radius: 2px;
			}
			&:nth-of-type(2) {
				border-left: 1px solid #ddd;
				border-right: 1px solid #ddd;
			}
		}
	}
}
</style>
